<template>
 <common-card title="今日交易用户数" :value="orderUser | numberFormat">
     <template>
       <!--  :options="getOptions ()" -->
      <v-echarts :options="getOptions ()" autoresize/>
     </template>
     <!-- <template v-slot:total> -->
     <template #total>
       <span>退货率 5.97%</span>
       <span class="emphasis">$ {{returnRate | numberFormat}}</span>
     </template>
   </common-card>
</template>

<script>
import {mapState} from "vuex"
export default {
name:"todayUsers",
computed:{
    // "orderUser": 182425,
    // "returnRate": 5.91,
    // "orderUserTrend": [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290, 330, 150],
    // "orderUserTrendAxis": ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00"],
    
  ...mapState({
      orderUser:state=>state.data.reportData.orderUser,
      returnRate:state=>state.data.reportData.returnRate,
      orderUserTrend:state=>state.data.reportData.orderUserTrend,
      orderUserTrendAxis:state=>state.data.reportData.orderUserTrendAxis,
  })
},
methods:{
  getOptions () {
    return {
      // x轴
      xAxis: {
        show:false,
        data:this.orderUserTrendAxis
      },
      // Y轴
      yAxis: {
        show:false,

      },
      // 系列
      series:[
        {
        name:"实时交易量",
        data:this.orderUserTrend,
        type: "bar",
        barWidth:'60%'

        }
      ],
      // 网格
      grid: {
        top:0,
        bottom:0,
        left:0,
        right:0
      },
      // 提示框
      tooltip: {
        trigger:"item"
      },
      // 指示图标颜色
      color: '#3398DB',
    }
  }
}
}
</script>

<style>

</style>